<!--  -->
<template>
  <div class="background-region">
    <div class="general-region">
      <div>
        <div>门店面积</div>
        <div>250 m<sup>2</sup></div>
      </div>
      <div>
        <div>员工数量</div>
        <div>10</div>
        <div>
          <el-progress
            type="circle"
            :percentage="60"
            :width="75"
            :height="75"
            :format="circleProgressFormat"
            :color="circleProgressColor"
          >
          </el-progress>
        </div>
      </div>
      <div>
        <!-- <div>
          <div>门店经理</div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="20"
          ></el-progress>
        </div>
        <div>
          <div>副经理</div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="20"
            status="success"
          ></el-progress>
        </div>
        <div>
          <div>小组长</div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="20"
            status="warning"
          ></el-progress>
        </div>
        <div>
          <div>店员</div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="40"
            status="exception"
          ></el-progress>
        </div> -->
        <div id="pie-chart" style="width: 100%; height: 100%"></div>
      </div>
      <div>
        <div style="display: flex; flex-flow: row">
          <div style="flex: 1" id="position">
            <div>门店位置</div>
            <div>浙江省杭州市拱墅区潮王路18号</div>
            <div>
              <img
                src="@/assets/地点.png"
                style="display: block; width: 50; height: 75px; margin: auto"
              />
            </div>
          </div>
          <div style="flex: 2; height: 100px">
            <baidu-map
              :center="center"
              :zoom="zoom"
              @ready="generateMap"
              class="baidu-map"
              @click="clickMap"
              :scroll-wheel-zoom="true"
            >
            </baidu-map>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; flex-flow: row">
      <div class="passengers-region">
        <div class="passenger-control">
          <div>
            <div>门店客流量</div>
            <div>平均客流量：<span>27.6</span></div>
          </div>
          <div>
            <el-radio-group v-model="choice" size="small">
              <el-radio-button label="0">今日</el-radio-button>
              <el-radio-button label="1">本周</el-radio-button>
              <el-radio-button label="2">本月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div id="bar-chart" style="width: 800; height: 450px"></div>
      </div>
      <div style="display: flex; flex-flow: column">
        <div class="board-region">
          <div>
            <div>最新通知</div>
            <div>查看全部&nbsp;&nbsp;<i class="el-icon-arrow-right"></i></div>
          </div>
          <div>
            <div>关于清明节放假的通知<span>4-2</span></div>
            <div>关于调整门店组织架构的通知<span>3-27</span></div>
            <div>门店团建时间通知<span>3-26</span></div>
            <div>门店交流群正式上线！<span>3-25</span></div>
          </div>
        </div>
        <div class="message-region">
          <div>
            <div>待处理业务</div>
            <div>查看全部&nbsp;&nbsp;<i class="el-icon-arrow-right"></i></div>
          </div>
          <div>
            <div>
              <div class="first">1</div>
              <div>
                <img
                  src="https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/xzh.png"
                  style=""
                />
              </div>
              <div>徐振华</div>
              <div><el-tag>申请调班</el-tag></div>
              <div>4-1</div>
              <div><el-tag>详情</el-tag></div>
            </div>
            <div>
              <div class="second">2</div>
              <div>
                <img
                  src="https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/hsy.jpg"
                  style=""
                />
              </div>
              <div>胡思怡</div>
              <div><el-tag>请假</el-tag></div>
              <div>3-24</div>
              <div><el-tag>详情</el-tag></div>
            </div>
            <div>
              <div class="third">3</div>
              <div>
                <img
                  src="https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/gy.jpeg"
                  style=""
                />
              </div>
              <div>郭耀</div>
              <div><el-tag>申请调班</el-tag></div>
              <div>3-24</div>
              <div><el-tag>详情</el-tag></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      passengerFlow: [
        ["08:00", 0.1],
        ["09:00", 7],
        ["10:00", 24.5],
        ["11:00", 30.6],
        ["12:00", 40.9],
        ["13:00", 48.5],
        ["14:00", 35.5],
        ["15:00", 29.6],
        ["16:00", 19.9],
        ["17:00", 25.5],
        ["18:00", 11.2],
        ["19:00", 4.6],
        ["20:00", 0.2],
      ],
      center: { lng: 109.45744048529967, lat: 36.49771311230842 },
      zoom: 13,
      choice: 0,
    };
  },
  created() {},
  mounted() {
    this.initBarChart();
    this.initPieChart();
  },
  methods: {
    generateMap({ BMap, map }) {
      var point = new BMap.Point(120.1689, 30.2553);
      map.centerAndZoom(point, 13);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: "Red",
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: "Red",
        fillColor: "#f03",
      });
      map.addOverlay(circle);
    },
    clickMap(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    circleProgressFormat() {
      return "Male Rate";
    },
    circleProgressColor() {
      return "#3d6aff";
    },
    timeToNumber(time) {
      return parseInt(time.split(":")[0]);
    },
    initBarChart() {
      var myChart = echarts.init(document.getElementById("bar-chart"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // prettier-ignore
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} ",
          },
          axisPointer: {
            snap: true,
          },
        },
        visualMap: {
          show: false,
          top: "top",
          dimension: 1,
          pieces: [
            {
              lte: 2,
              color: "#487eb0",
            },
            {
              gt: 2,
              lte: 5,
              color: "#4cd137",
            },
            {
              gt: 5,
              lte: 15,
              color: "#fbc531",
            },
            {
              gt: 15,
              lte: 30,
              color: "#9c88ff",
            },
            {
              gt: 30,
              color: "#00a8ff",
            },
          ],
        },
        series: [
          {
            name: "门店 1",
            type: "line",
            smooth: true,
            // prettier-ignore
            data: this.passengerFlow,
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)",
              },
              data: [
                [
                  {
                    name: "客流峰值",
                    xAxis: "12:00",
                  },
                  {
                    xAxis: "14:00",
                  },
                ],
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initPieChart() {
      var myChart = echarts.init(document.getElementById("pie-chart"));
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "10%",
          right: "0%",
          orient: "vertical",
        },

        series: [
          {
            name: "职位组成",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["40%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1, name: "门店经理" },
              { value: 1, name: "副经理" },
              { value: 2, name: "小组长" },
              { value: 6, name: "店员" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.background-region {
  height: 680px;
}

.general-region {
  width: 100%;
  height: 175px;
  display: flex;
}

.general-region > div {
  flex: 1;
  margin: 7.5px 7.5px;
}

.general-region > div:nth-child(1) {
  border-radius: 5px;
  background-image: url("@/assets/HomePage/blue.png");
  background-size: cover;
}

.general-region > div:nth-child(1) > :nth-child(1) {
  margin-top: 15px;
  margin-left: 15px;
  font-size: 20px;
  color: white;
}
.general-region > div:nth-child(1) > :nth-child(2) {
  margin-left: 15px;
  font-size: 45px;
  color: white;
}

.general-region > div:nth-child(1) > :nth-child(2) sup {
  font-size: 20px;
}

.general-region > div:nth-child(2) {
  border-radius: 5px;
  background-image: url("@/assets/HomePage/cyan.png");
  background-size: cover;

  position: relative;
}

.general-region > div:nth-child(2) > :nth-child(1) {
  margin-top: 15px;
  margin-left: 15px;
  font-size: 20px;
  color: white;
}
.general-region > div:nth-child(2) > :nth-child(2) {
  margin-left: 15px;
  font-size: 45px;
  color: white;
}

.general-region > div:nth-child(2) > :nth-child(3) {
  position: absolute;
  top: 15px;
  right: 60px;
}

.general-region > div:nth-child(3) {
  background: rgba(255, 255, 0, 0.1);
  border-radius: 5px;
  /* background-image: url("@/assets/HomePage/orange.png"); */
  background-size: cover;
}
/*
.general-region > div:nth-child(3) > div {
  display: flex;
  margin-top: 7.5px;
  margin-left: 7.5px;
}

.general-region > div:nth-child(3) > div > div:nth-child(1) {
  flex: 3;
  font-size: 15px;
  color: gray;
}
.general-region > div:nth-child(3) > div > div:nth-child(2) {
  flex: 7;
  margin-right: 10px;
} */

.general-region > div:nth-child(4) {
  flex: 1.55;
}

#position {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background: white;
  height: 200px;
}

#position > div:nth-child(1) {
  margin: 10px 10px;
  padding-bottom: 10px;
  font-size: 25px;
  border-bottom: 1px solid gray;
}

#position > div:nth-child(2) {
  margin: 10px 10px;
  padding-bottom: 10px;
  font-size: 15px;
  color: gray;
}

.baidu-map {
  height: 200px;
}

.passengers-region {
  width: 65%;
  height: 490px;
  border-radius: 5px;
  background: white;
  margin: 7.5px;
}
.passenger-control {
  display: flex;
}
.passenger-control > div:nth-child(1) div:nth-child(1) {
  margin-left: 25px;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
}
.passenger-control > div:nth-child(1) div:nth-child(2) {
  margin-left: 25px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 300;
}
.passenger-control > div:nth-child(1) div:nth-child(2) span {
  font-size: 20px;
  color: orange;
}

.passenger-control > div:nth-child(2) {
  margin-left: 175px;
  margin-top: 10px;
}

/*
.passenger-control > div:nth-child(2) > div {
  flex: 1;
  margin: 5px 5px;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

.passenger-control > div:nth-child(2) > div:nth-child(1) {
  color: white;
  background-color: #4a97f2;
  border-radius: 5px;
} */

.board-region {
  width: 400px;
  height: 200px;
  border-radius: 5px;
  background: white;
  margin: 15px;
  margin-top: 47.5px;

  display: flex;
  flex-flow: column;
}

.board-region > div:nth-child(1) {
  position: relative;
  flex: 1;
}

.board-region > div:nth-child(1) > div:nth-child(1) {
  float: left;
  margin-left: 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 750;
}
.board-region > div:nth-child(1) > div:nth-child(2) {
  float: right;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  /* color: rgb(43, 203, 186); */
  color: rgb(69, 170, 242);
}

.board-region > div:nth-child(2) {
  flex: 4;

  display: flex;
  flex-flow: column;
}

.board-region > div:nth-child(2) > div {
  flex: 1;
  margin: 5px 15px;
  font-size: 12.5px;
}

.board-region > div:nth-child(2) > div::before {
  content: "";
  display: inline-block;
  width: 7.5px;
  height: 7.5px;
  margin-right: 5px;
  border-radius: 50%;
}
.board-region > div:nth-child(2) > div:nth-child(1)::before {
  /* border: 2px solid rgb(252, 92, 101); */
  border: 2px solid rgb(69, 170, 242);
}
.board-region > div:nth-child(2) > div:nth-child(2)::before {
  /* border: 2px solid rgb(253, 150, 68); */
  border: 2px solid rgb(69, 170, 242);
}
.board-region > div:nth-child(2) > div:nth-child(3)::before {
  /* border: 2px solid rgb(254, 211, 48); */
  border: 2px solid rgb(69, 170, 242);
}
.board-region > div:nth-child(2) > div:nth-child(4)::before {
  /* border: 2px solid rgb(38, 222, 129); */
  border: 2px solid rgb(69, 170, 242);
}

.board-region > div:nth-child(2) > div > span {
  float: right;
  margin-right: 15px;
  color: rgba(0, 0, 0, 0.5);
}

.message-region {
  width: 400px;
  height: 200px;
  border-radius: 5px;
  background: white;
  margin: 15px;
  margin-top: 0;

  display: flex;
  flex-flow: column;
}

.message-region > div:nth-child(1) > div:nth-child(1) {
  float: left;
  margin-left: 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 750;
}
.message-region > div:nth-child(1) > div:nth-child(2) {
  float: right;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  /* color: rgb(43, 203, 186); */
  color: rgb(69, 170, 242);
}

.message-region > div:nth-child(2) > div {
  width: 100%;
  display: flex;
  flex-flow: row;
  margin-top: 5px;
}

.message-region > div:nth-child(2) > div > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.message-region > div:nth-child(2) > div img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.first {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 5px;
  background-image: linear-gradient(
    to right,
    rgb(69, 170, 242),
    rgb(75, 123, 236)
  );
}
.second {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 5px;
  background-image: linear-gradient(
    to right,
    rgb(69, 170, 242),
    rgb(75, 123, 236)
  );
}
.third {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 5px;
  background-image: linear-gradient(
    to right,
    rgb(69, 170, 242),
    rgb(75, 123, 236)
  );
}
</style>
